<template>
	<view class="clockIn">
		<u-navbar :title="assignName+'-打卡'" :autoBack="true" ></u-navbar>
		<view class="clockIn_wrapper">
			<view class="clockIn_time">
				<view class="timer">
					<view class="timer_top">
						上班
					</view>
					<view class="timer_bot">
						<u-icon name="checkmark-circle-fill" color="#2979ff" size="24rpx" v-if="signInTime"></u-icon>
						<u-icon name="info-circle-fill" color="#909399" size="24rpx" v-else></u-icon>
						{{signInTime?signInTime+'已打卡':'未打卡'}}
					</view>
				</view>
				<view class="timer">
					<view class="timer_top">
						下班
					</view>
					<view class="timer_bot">
						<u-icon name="checkmark-circle-fill" color="#2979ff" size="24rpx" v-if="signOutTime"></u-icon>
						<u-icon name="info-circle-fill" color="#909399" size="24rpx" v-else></u-icon>
						{{signOutTime?signOutTime+'已打卡':'未打卡'}}
					</view>
				</view>
			</view>
			<view class="click_postion">
				<view :class="[status==0||status==3 ? '' : 'isActive','click_box']"  @click="$u.throttle(clockInFn, 1000)">
					<view class="timer_top">
						{{timerTopText}}
					</view>
					<view class="timer_bot">
						{{timeText}}
					</view>
				</view>
				<view class="range">
					<u-icon name="checkmark-circle-fill" color="#41a863" size="24rpx" v-if="status"></u-icon>
					<u-icon name="info-circle-fill" color="#f9c319" size="24rpx" v-else></u-icon>
					{{rangeText+address}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				assignTaskId:null,
				longitude:0,
				latitude:0,
				timer1:null,
				timer2:null,
				timerTopText:'上班打卡',
				rangeText:'未进入考勤范围',
				address:'',
				assignName:'',
				timeText:'',
				signInTime:null,
				signOutTime:null,
				status:0,
				key:'35de07983dda09430a48ce0483c28513',
				cityName:''
			}
		},
		onLoad(option) {
			this.assignTaskId = option.assignTaskId
			this.assignName=option.assignName
			this.address=option.address
		},
		onShow() {
			this.scheduledTasks()
			this.time()
			this.timer1=setInterval(()=>{
				this.scheduledTasks()
			},3000)
			this.timer2=setInterval(()=>{
				this.time()
			},1000)
		},
		onHide() {
			if(this.timer1) {
			   clearInterval(this.timer1); 
			   this.timer1 = null;  
			}
			if(this.timer2) {
			   clearInterval(this.timer2); 
			   this.timer2 = null;  
			}
		},
		onUnload(){
			
			if(this.timer1) {  
			   clearInterval(this.timer1); 
			   this.timer1 = null;  
			}
			if(this.timer2) {
			   clearInterval(this.timer2); 
			   this.timer2 = null;  
			}
		},
		methods:{
			clockInFn(){
				if(this.status==3){
					return uni.$u.toast('今日打卡已完成 :)');
				}
				
				if(this.status==0){
					return uni.$u.toast('未进入考勤范围 :)');
				}
				
				uni.$u.http.post('/sign/signIn',{
					latitude:28.242653,
					longitude:112.960597,
					// latitude:this.latitude,
					// longitude:this.longitude,
					assignTaskId:this.assignTaskId,
					status:this.status
				}).then(res=>{
					this.scheduledTasks()
				})
			},
			time(){
			    const date = new Date();
			    let hour = date.getHours();
			    let minutes = date.getMinutes();
			    let seconds = date.getSeconds();
				if(minutes-9<=0){
					minutes='0'+minutes
				}
				if(hour-9<=0){
					hour='0'+hour
				}
				if(seconds-9<=0){
					seconds='0'+seconds
				}
				// console.log(typeof seconds)
				this.timeText= `${hour}:${minutes}:${seconds}`
			},
			// 经纬度转具体城市
			// 1）需要用到高德地图的逆地理编码
			// 2）需要当前地理位置的经纬度
			// 3）小程序的key值
			loadCity(longitude, latitude) {
			  const _this = this
			  uni.request({
			    header: {
			      'Content-Type': 'application/text',
			    },
			    //注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
			    url:
			      'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
			      longitude +
			      ',' +
			      latitude +
			      '&key=' +
			      _this.key +
			      '&radius=1000&extensions=all',
			    success(res) {
					console.log(res)
			      if (res.statusCode === 200) {
			        _this.cityName = res.data.regeocode.addressComponent.city
			        console.log('获取中文街道地理位置成功', _this.cityName)
			      } else {
			        console.log('获取信息失败，请重试！')
			      }
			    },
			  })
			},
			scheduledTasks(){
				uni.getLocation({
				  type: 'wgs84', // 坐标类型，默认为wgs84，可选的值为gcj02和bd09ll
				  fail:  ()=>{
				  		uni.showToast({
				  		    title: '获取地址失败，将导致打卡功能不可用',
				  			icon:'none'
				  		});
				  	},
				  success: res => {
				    // 获取成功，经度和纬度在res.longitude和res.latitude中
					this.longitude=res.longitude
					this.latitude=res.latitude
					// this.loadCity(res.longitude,res.latitude)
					uni.$u.http.post('/sign/getSignByTaskIdAndUserId',{
						latitude:28.242653,
						longitude:112.960597,
						// latitude:res.latitude,
						// longitude:res.longitude,
						assignTaskId:this.assignTaskId
					}).then(res=>{
						// 0 未到指定范围无法打卡 1 打上班卡 2 打下班卡 3 今日打卡完结
						if(res){
							this.signInTime=res.signInTime? res.signInTime.split(' ')[1]:null
							this.signOutTime=res.signOutTime? res.signOutTime.split(' ')[1]:null
							this.status=res.status
							if(res.status==0){
								this.rangeText='未进入考勤范围:'
							}else if(res.status==1||res.status==2){
								this.rangeText='已进入考勤范围:'
							}else{
								this.rangeText=''
								if(this.timer1) {
								   clearInterval(this.timer1); 
								   this.timer1 = null;  
								}
							}
							
							if(res.signInTime){
								this.timerTopText='下班打卡'
							}
							if(res.signOutTime){
								this.timerTopText='今日打卡完结'
							}
						}
					})
					// this.getSignByTaskIdAndUserId()
				  },
				  fail: err => {
				    // 获取失败，err为错误信息
				    console.log('getLocation err:', err);
				  }
				});
				
			},
			
			
		}
	}
</script>

<style scoped lang="scss">
	.isActive{
		background: linear-gradient(135deg,#72EDF2 10%,#5151E5 100%) !important; 
	}
	.clockIn_wrapper{
		position: relative;
		background-color: #ffffff;
		border-radius: 8rpx;
		margin: 0rpx 28rpx;
		margin-top: 220rpx;
		height: 80vh;
		padding: 28rpx;
		padding-top: 40rpx;
	}
	.clockIn_time{
		display: flex;
		.timer{
			flex: 1;
			margin: 0 10rpx;
			padding: 24rpx;
			background-color: #ededef;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.timer_top{
				color: #161e27;
				font-size: 28rpx;
				margin-bottom: 10rpx;
				
			}
			.timer_bot{
				color: #88888a;
				font-size: 24rpx;
				display: flex;
			}
		}
	}
	.click_postion{
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		bottom: 40%;
		left: 50%;
		transform:  translate(-50%);
		.click_box{
			width: 250rpx;
			height: 250rpx;
			box-sizing: border-box;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: linear-gradient(135deg,#ededed 10%,	#ababab 100%); 
			.timer_top{
				color: #f9fefe;
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}
			.timer_bot{
				color: #fff;
				font-size: 25rpx;
			}
			margin-bottom: 50rpx;
		}
		.range{
			display: flex;
			width: 400rpx;
			color: #8d8c93;
		}
	}
	
</style>